<template>
	<view>
		<!-- 默认搜索样式 -->
		<view v-if="searchType == 1" class="list-search">
			<input class='search__text' v-model="keyword" confirm-type="search" @confirm="searchSubmit"
			 :placeholder="placeholder" placeholder-class='search__text-s' />
			<button class="search-icon" @click="searchSubmit"><text class="iconfont">&#xe686;</text></button>
		</view>
		
		<!-- 其他搜索样式 -->
		<view v-if="searchType == 2" class="list-search-custom">
			<input class='search__text' v-model="keyword" confirm-type="search" @confirm="searchSubmit"
			 :placeholder="placeholder" placeholder-class='search__text-s'>
			</input>
			<button class="search__btn" @click="searchSubmit">搜索</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'stTopSearch',
		props: {
			searchType:{
				type: [String,Number],
				default: 1
			},
			value:{
				type: String,
				default: ''
			},
			placeholder:{
				type: String,
				default: '搜索关键词'
			}
		},
		watch: {
			value: {
				handler: function(newVal) {
					this.keyword = this.value
				},
				immediate: true
			},
		},
		data() {
			return {
				keyword:'',
				focusStatus: false,
			};
		},
		methods: {
			searchSubmit(){
				this.$emit('searchSubmit', this.keyword?this.keyword:this.placeholder); 
			}
		}
	}
</script>

<style lang="scss">
	// 搜索
	.list-search {
		padding: 16rpx 25rpx;
		background-color: $uni-bg-color;
		position: relative;
		z-index: 99;

		.search__text {
			position: relative;
			height: 64rpx;
			width: 566rpx;
			padding: 0 104rpx 0 20rpx;
			border-radius: 40rpx;
			background-color: $uni-bg-color-grey;
			font-size: $uni-font-size-sm;
			color: $uni-text-color;
		}

		.search__text-s {
			font-size: $uni-font-size-sm;
			color: $uni-text-color-placeholder;
		}

		.search-icon {
			position: absolute;
			right: 25rpx;
			top: 16rpx;
			padding: 0 50rpx;
			z-index: 101;
			height: 64rpx;
			width: 64rpx;
			background-color: transparent;
			.iconfont{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				color: #b2b2b2;
			}
		}
	}
	
	.list-search-custom{
		padding: 16rpx 0;
		background-color: $uni-bg-color;
		position: relative;
		display: flex;
		
		.search__text {
			position: relative;
			margin:0 25rpx;
			height: 64rpx;
			padding: 0 20rpx;
			border-radius: 40rpx;
			background-color: $uni-bg-color-grey;
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			font-size: $uni-font-size-sm;
			color: $uni-text-color;
			flex: 1 1 auto;
		}
		
		.search__text-s {
			font-size: $uni-font-size-sm;
			color: $uni-text-color-placeholder;
		}
		.search-icon {
			display: flex;
			align-items: center;
			position: absolute;
			left: 20rpx;
			top: 0;
			bottom: 0;
			padding: 0 18rpx 0 40rpx;
			z-index: 101;
		}
		.search__btn {
			flex: 0 0 auto;
			padding: 0 24rpx 0 0;
			font-size: 26rpx;
			color: $uni-text-color-primary;
			line-height: 64rpx;
			background-color: transparent;
		}
	}
</style>
